<style>
.m-h{
	margin-top: 1px !important;
}
uni-switch .uni-switch-input::before{
	border-color: #10f955 !important;
	background-color: #10f955 !important;
}
uni-page-body{
	background: #f7f4f4;
}
.c1{
	font-size: 10px;margin-left: 10px;
  padding-right: 10px;
  padding-left: 10px;
  background: #fa436a;
  color: #fff;
  font-weight: 500;
  border-radius: 3px;
}
.cell-tit{
	font-size: 10px !important;
}
.list-cell-br{
	display: grid;
	grid-template-rows: auto auto;
}
.list-cell-br{
	line-height: 13px !important;
	position: absolute;
  left: 15px;
}
.list-cell{
position: relative;
}
.textf{
	border: 1px solid #999;
  border-left: 5px solid #999;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  border-radius: 2px;
}
.cc{
	font-size: 12px !important;

}
.textf1{
	margin-top: 7px;
}
.textf.a{
	border: 1px solid #54b4eee5 !important;
  	border-left: 5px solid #54b4eee5 !important;
}
.textf.b{
	border: 1px solid #f45828e5 !important;
  	border-left: 5px solid #f45828e5 !important;
}
.textf.c{
	border: 1px solid #f225f9e5 !important;
  	border-left: 5px solid #f225f9e5 !important;
}
.textf.d{
	border: 1px solid #999 !important;
  	border-left: 5px solid #999 !important;
}
.c11{
	display: grid;
  	grid-template-columns: auto 210px;
  	padding-left: 15px;
  padding-right: 15px;
  height: 30px;
  line-height: 30px;
  background: #fff;
}
.c12{
	padding-top: 3px;
  padding-bottom: 3px;
  
  padding-left: 10px;
  padding-right: 10px;

  margin-left: 10px;


  background: #ff754bcf;
  color: #fff;
  border-radius: 30px;
}
.c12.p{
	background: #dbd3d0 !important;
	color: #000;
}
.c13{
/*	position: fixed;*/
  bottom: 65px;
  width: 100%;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
.c14{
	line-height: 40px;
  background: #17ce08;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
}
.c-10{
	height: 10px;
  width: 100%;
}
.list-cell.m-t.m-h {
	margin-bottom: 10px !important;
}



</style>

<template>
	<view class="container">
		<view class="c11">
			<view style="text-align: left;font-size: 10px;color: #999;">菜单</view>
			<view style="font-size: 10px;text-align: right;">
				<text class="c12" v-show="show" @click="confirms()">保存修改</text>
				<text class="c12" @click="addcai">添加菜品</text>
				<text class="c12 p" @click="def">默认</text>
			</view>
		</view>
		<view class="c3" >
			<view v-for="(vcailist,index) in cailist" v-if="vcailist.del==0"  class="list-cell m-t m-h ">
				<view class="list-cell-br cell-tit">
					<view class="cc">{{index+1}}. {{vcailist.name}}</view>
					<view class="textf1">
						<text v-if="vcailist.caitype[0]==1" class="textf a">早餐</text>
						<text v-if="vcailist.caitype[1]==1" class="textf b">午餐</text>
						<text v-if="vcailist.caitype[2]==1" class="textf c">晚餐</text>
						<text v-if="vcailist.caitype[3]==1" class="textf d">夜宵</text>
					</view>
				</view>
				<text class="cell-tit"> </text>
				<switch :checked="vcailist.status" color="#fa436a" @change="switchChange(index)" />
				<text class="c1"  @click="switchChangedel(index)">删除</text>
			</view>
			
			
		</view>


		<view class="c13">
			<view class="c14" v-show="show" @click="confirms()">修改过记得点我保存喔!</view>
		</view>

	</view>
</template>

<script>
	import cailist from "@/data/data.js";
	import gcailist from "@/data/data.js";

	export default {
		data() {
			return {
				show:false,
				cailist:[],
				gcailist:[]
			};
		},
		onShow(){
			
			// this.cailist 	=this.cailist.sort();
			// this.gcailist 	=this.gcailist.sort();
			// this.cailist.reverse();
			// uni.setStorageSync('gcailist', JSON.stringify(this.gcailist));

			let cailists=uni.getStorageSync("cailist");
			let gcailists=uni.getStorageSync("gcailist");
			this.cailist=JSON.parse(cailists);
			this.gcailist=JSON.parse(gcailists);
	
			// let cailists=uni.getStorageSync("cailist");
			// if (!cailists) {
			// 	uni.setStorageSync('cailist', JSON.stringify(this.cailist));
			// }else{
			// 	cailists=JSON.parse(cailists);
			// 	this.cailist=cailists;
			// }
			

		},
		onLoad(){

			// var cailists=localStorage.getItem("cailist");
			// if (!cailists) {
			// 	localStorage.setItem('cailist', JSON.stringify(this.cailist));
			// }else{
			// 	cailists=JSON.parse(cailists);
			// 	this.cailist=cailists;
			// }
			

			// this.gcailist=sscailist;

			

			

		},
		methods:{
			addcai(){

				if(this.show==true){
					uni.showModal({
						title:"提示",
					    content: "修改未完成, 确定要继续吗?",
					    success: (e)=>{
					    	if(e.confirm){
					    		uni.navigateTo({
									url:"/pages/set/cai"
								})
					    	}
					    }
					});
				}else{
					uni.navigateTo({
						url:"/pages/set/cai"
					})
				}

				
			},
			confirms(){

				uni.showModal({
					title:"提示",
				    content: "保存成功",
				    showCancel:false,
				    success: (e)=>{
				    	let arr=[];
				    	let index=0;
				    	for (var i = 0; i < this.cailist.length ; i++) {
				    		if(this.cailist[i].del==0){
				    			arr[index]=this.cailist[i];
				    			index++;
				    		}
				    	}
				    	// localStorage.setItem('cailist', JSON.stringify(arr));
				    	uni.setStorageSync('cailist', JSON.stringify(arr) );
				    	this.cailist=arr;
				    	this.show=false;
				    	// console.log(arr)
				    }
				});
			},
			switchChange(index){
				
				if (this.cailist[index].status) {
					this.cailist[index].status=false;
				}else{
					this.cailist[index].status=true;
				}

				// console.log(this.cailist);
				this.show=true;
			},
			switchChangedel(id){
				
			
				this.cailist[id].del=1;
				this.cailist.slice(id)
				
				
				this.show=true;
			},
			def(){
				//
				uni.showModal({
					title:"提示",
				    content: "确定要恢复默认吗?",
				    success: (e)=>{
				    	if(e.confirm){
				    		
				    		// localStorage.setItem('cailist', JSON.stringify(this.gcailist));	
				    		
				    		let gcaili=uni.getStorageSync("gcailist");
				    		gcaili=JSON.parse(gcaili);
				    		this.cailist=gcaili;
				    		uni.setStorageSync('cailist', JSON.stringify(gcaili) );
				    		this.show=false;

				    	}
				    }
				});
			}

		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
